<template>
    <div class="image-toolbar">
        <div class="tool-btn-group">
            <el-tag class="tool-tag" type="info" effect="dark" size="default">{{ props._dataset_info &&
                props._dataset_info['label_format'] }}</el-tag>
            <div class="tool-divider"></div>
            <el-tooltip content="选择(S)" placement="bottom" effect="light">
                <div class="tool-btn" :class="_label_mode === 'pointer' ? 'selected' : ''"
                    @click="vueImageRegion.clickLabelTool('pointer')">
                    <Position class="tool-btn-icon" />
                </div>
            </el-tooltip>
            <el-tooltip content="矩形(R)" placement="bottom" effect="light">
                <div class="tool-btn" :class="_label_mode === 'rect' ? 'selected' : ''"
                    @click="vueImageRegion.clickLabelTool('rect')">
                    <Crop class="tool-btn-icon" />
                </div>
            </el-tooltip>
            <el-tooltip v-if="_tools_config.includes('poly')" content="多边形(W/Q)" placement="bottom" effect="light">
                <div class="tool-btn" :class="_label_mode === 'poly' ? 'selected' : ''"
                    @click="vueImageRegion.clickLabelTool('poly')">
                    <House class="tool-btn-icon" />
                </div>
            </el-tooltip>
            <el-tooltip content="上一个(A)" placement="bottom" effect="light">
                <div class="tool-btn" @click="vueImageRegion.emitMessage('preLabelData')">
                    <Back class="tool-btn-icon" />
                </div>
            </el-tooltip>
            <el-tooltip content="下一个(D)" placement="bottom" effect="light">
                <div class="tool-btn" @click="vueImageRegion.emitMessage('nextLabelData')">
                    <Right class="tool-btn-icon" />
                </div>
            </el-tooltip>
            <el-tooltip content="删除(Ctrl+Delete)" placement="bottom" effect="light">
                <div class="tool-btn" @click="vueImageRegion.emitMessage('deleteLabelData')">
                    <Close class="tool-btn-icon" />
                </div>
            </el-tooltip>
            <div class="tool-divider"></div>
            <el-tooltip content="显示配置" placement="bottom" effect="light">
                <div class="tool-btn" @click="showDisplayConfig()">
                    <Setting class="tool-btn-icon" />
                </div>
            </el-tooltip>
        </div>
    </div>
    <!-- create dataset dialog -->
    <el-dialog v-model="dialogFormVisible" title="配置">
        <el-form :model="form" table-layout="auto" label-position="left">
            <el-form-item label="显示配置" :label-width="formLabelWidth">
                <el-checkbox v-model="form.displayBbox" label="显示检测框" />
                <el-checkbox v-model="form.displaySeg" label="显示分割结果" />
            </el-form-item>
            <el-form-item label="类别定义" :label-width="formLabelWidth">
                <el-table :data="form.categories" style="width: 100%" max-height="250">
                    <el-table-column prop="category_id" label="category_id" width="120" />
                    <el-table-column prop="category_name" label="category_name" min-width="150" />
                </el-table>
                <el-button class="btn-add-category" type="primary" plain>添加类别</el-button>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="onConfigChanged">确定</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, inject, watch } from 'vue';
import API from '@/js/api';
import LabelConfig from '@/js/models/LabelConfig';
import LabelStorageLocal from '@/js/models/LabelStorageLocal';

// 接收父组件（ImageRegion）传递过来的函数和参数
let vueToolPanel = inject('vueToolPanel');
let vueImageRegion = inject('vueImageRegion');
const props = defineProps(['_label_mode', '_dataset_info']);

// 定义内部的变量和参数
let dialogFormVisible = ref(false);
let formLabelWidth = '100px';
let form = reactive({
    displayBbox: true,
    displaySeg: true,
    categories: []
});

// 工具的配置
let _machine = ref([]);
let _tools_config = ref([]);

// 定义成员函数
async function showDisplayConfig() {
    // console.log('showDisplayConfig categories = ', LabelStorageLocal.categories);
    // 读取配置和categories信息
    form.displayBbox = LabelConfig.getConfig('rect_style.visible');
    form.displaySeg = LabelConfig.getConfig('polygon_style.visible');
    form.categories = LabelStorageLocal.categories;

    // 显示对话框
    dialogFormVisible.value = true;
}

function onConfigChanged() {
    let config = {
        displayBbox: form.displayBbox,
        displaySeg: form.displaySeg,
        categories: form.categories
    };

    // 保存配置
    LabelConfig.setConfig(props._dataset_info.id, 'rect_style.visible', form.displayBbox);
    LabelConfig.setConfig(props._dataset_info.id, 'polygon_style.visible', form.displaySeg);

    // 生效配置
    vueToolPanel.setConfig(config);
    dialogFormVisible.value = false;
}

watch(
    () => props._dataset_info,
    (newValue, oldValue) => {
        // console.log(`Label format changed from [${JSON.stringify(oldValue)}] to [${JSON.stringify(newValue)}]`);
        _machine.value = API.getProvider();
        let config = LabelConfig.getConfig();
        if (config) {
            _tools_config.value = config.tools;
        }
    }
);

onMounted(() => { });
</script>

<style scoped>
.image-toolbar {
    background-color: rgba(48, 46, 46, 0.5);
    display: flex;
    width: 100%;
    height: 38px;
}

.tool-btn-group {
    display: flex;
    padding-left: 4px;
    padding-right: 3px;
}

/* .tool-btn-group:not(:last-child) {
    border-right: 1px solid #bbb7b7;
} */

.tool-btn {
    background-color: rgb(69, 65, 65);
    /* box-shadow: 1px 1px 1px rgb(115, 115, 112); */
    margin: 4px 0px 0px 4px;
    padding: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 3px;
    border: solid 1px;
    border-color: rgb(85, 85, 85);
}

.tool-btn.selected {
    background-color: rgb(175, 89, 89);
}

.tool-btn:hover {
    background-color: rgb(175, 89, 89);
}

.tool-btn-icon {
    padding: 4px;
    width: 1em;
    height: 1em;
    color: rgb(198, 198, 208);
    font-weight: 500;
}

.btn-add-category {
    width: 100%;
    margin: 5px 5px 2px 5px;
}

.tool-tag {
    margin: 4px 0px 0px 4px;
    height: 28px;
    cursor: default;
}

.tool-divider {
    width: 1px;
    height: 26px;
    margin: 6px 3px 0px 7px;
    background-color: rgb(82, 82, 82);
}
</style>
